<template>
  <div>
    <a-row style="margin-top: 0" :gutter="[24, 24]">
      <!-- 订单总数 -->
      <a-col :sm="24" :md="12" :xl="6">
        <!-- :loading="loading" -->
        <a-card :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
          <div class="chart-card-header">
            <div class="meta">
              <span class="chart-card-title">订单总数</span>
              <span class="chart-card-action">
                <slot name="action"></slot>
              </span>
            </div>
            <div class="total">
              <span>￥184，21213</span>
            </div>
          </div>
          <div class="chart-card-content">
            <div class="content-fix">
              <slot></slot>
            </div>
          </div>
          <div class="chart-card-footer">
            <slot name="footer"></slot>
          </div>
          <!-- <div class="chart-trend">
            <span>sss%</span>
            <span :class="['chart-trend-icon', trend]" style=""
              ><a-icon :type="'caret-' + trend"
            /></span>
          </div> -->
        </a-card>
      </a-col>
      <!-- /订单总数 -->
      <!-- 总金额 -->
      <a-col :sm="24" :md="12" :xl="6">
        <!-- :loading="loading" -->
        <a-card :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
          <div class="chart-card-header">
            <div class="meta">
              <span class="chart-card-title">总金额</span>
              <span class="chart-card-action">
                <slot name="action"></slot>
              </span>
            </div>
            <div class="total">
              <span>111</span>
            </div>
          </div>
          <div class="chart-card-content">
            <div class="content-fix">
              <slot></slot>
            </div>
          </div>
          <div class="chart-card-footer">
            <slot name="footer"></slot>
          </div>
        </a-card>
      </a-col>
      <!-- /总金额 -->
      <!-- 佣金 -->
      <a-col :sm="24" :md="12" :xl="6">
        <!-- :loading="loading" -->
        <a-card :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
          <div class="chart-card-header">
            <div class="meta">
              <span class="chart-card-title">佣金</span>
              <span class="chart-card-action">
                <slot name="action"></slot>
              </span>
            </div>
            <div class="total">
              <span>111</span>
            </div>
          </div>
          <div class="chart-card-content">
            <div class="content-fix">
              <slot></slot>
            </div>
          </div>
          <div class="chart-card-footer">
            <slot name="footer"></slot>
          </div>
        </a-card>
      </a-col>
      <!-- /佣金 -->
      <!-- 会员总数 -->
      <a-col :sm="24" :md="12" :xl="6">
        <!-- :loading="loading" -->
        <a-card :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
          <div class="chart-card-header">
            <div class="meta">
              <span class="chart-card-title">会员总数</span>
              <span class="chart-card-action">
                <slot name="action"></slot>
              </span>
            </div>
            <div class="total">
              <span>111</span>
            </div>
          </div>
          <div class="chart-card-content">
            <div class="content-fix">
              <slot></slot>
            </div>
          </div>
          <div class="chart-card-footer">
            <slot name="footer"></slot>
          </div>
        </a-card>
      </a-col>
      <!-- /会员总数 -->
    </a-row>
  </div>
</template>

<script>
export default {
  props: {
    // title: {
    //   type: String,
    //   default() {
    //     return "";
    //   },
    // },
    // loading: {
    //   type: Boolean,
    //   default() {
    //     return "";
    //   },
    // },
  },
  name: "",
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang="less" scoped>
.chart-card-header {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.chart-card-header .meta {
  position: relative;
  overflow: hidden;
  width: 100%;
  color: @text-color-second;
  font-size: 14px;
  line-height: 22px;
}
.chart-card-action {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}
.total {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 30px;
  line-height: 38px;
  height: 38px;
}
.chart-card-footer {
  border-top: 1px solid @border-color-base;
  padding-top: 9px;
  margin-top: 8px;
}
.chart-card-content {
  margin-bottom: 12px;
  position: relative;
  height: 46px;
  width: 100%;
}
.chart-card-content .content-fix {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.chart-trend {
  display: inline-block;
  font-size: 14px;
  .chart-trend-icon {
    font-size: 12px;
    &.up {
      color: @red-6;
    }
    &.down {
      color: @green-6;
    }
  }
}
</style>